<template>
  <!--快捷查询-->
  <el-card
    class="box-card"
    :body-style="{ padding: '7px' }"
  >
    <el-scrollbar style="min-width:500px;">
      <div class="flex-content" style="min-width:1400px;">
        <el-form
          inline
          label-position="right"
          :model="findItemModel"
          ref="formControl"
          class="demo-form-expand"
          label-width="1px"
          size="mini"
        >
          <el-form-item style="vertical-align: top;min-height:33px;width:100px;margin: 2px;">
            <el-dropdown size="small">
              <el-button type="primary">
                快捷查询
                <d-arrow-right style="width: 1.5em; height: 1.5em; margin-right: 8px;" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="quickClick(0)"
                  >
                    快捷查询
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-for="(item, key, index) in customer"
                    :key="'quick_' + index"
                    @click="quickClick(key)" 
                  >
                    {{item.title}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
          <el-form-item
            v-for="(ctrId, index) in arrQuickFind"
            :key="'find_quick_' + index + '_' + ctrId"
            style="border:1px solid #cfe1f3;min-height:33px;"
            :style="'margin: 3px;width:' + ( 170 * itemMeta[ctrId].colCount + 80) + 'px;'"
          >
            <!--查询的子控件，采用动态组件的方式 component-->
            <find-item
              :model="findModel[ctrId]"
              :itemMeta="itemMeta[ctrId]"
            >
            </find-item>
          </el-form-item>
          <el-form-item style="vertical-align: top;width:60px">
            <el-button type="primary" round @click="moreOpen">更多</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </el-card>
  <!--更多查询，放在抽屉里面-->
  <find-more
    :allFind="allFind"
    :itemMeta="itemMeta"
    :dialogInfo="dialogInfo"
    :findModel="findModel"
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElCard, ElScrollbar, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElForm, ElFormItem } from 'element-plus'
  import { DArrowRight } from '@element-plus/icons'
  // 查询控件的属性，创建查询结构
  import { findProps, findController } from '../map'

  // 更多查询条件，弹抽屉
  import findMore from './find-more-div.vue'

  // 查询的子控件的容器
  import findItem from './item/_shell.vue'

  /**
   * @function div 格式的查询控件
   * @description 可以依据 json 动态生成查询控件
   * @returns {*} Vue 组件，查询控件
   */
  export default defineComponent({
    name: 'el-find-div',
    components: {
      ElCard, ElScrollbar, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElForm, ElFormItem,
      DArrowRight, // 箭头图标
      findMore,
      findItem
    },
    props: {
      ...findProps
    },
    setup (props, context) {
      // console.log('查询控件props', props)

      const {
        resetForm, // 重置表单
        moreOpen, // 打开更多
        dialogInfo, // 是否显示更多
        findModel, // 内部查询结构
        arrQuickFind, // 快捷查询
        formControl // 获取表单的dom
      } = findController(props)

      return {
        resetForm, // 重置表单
        moreOpen, // 打开更多
        dialogInfo, // 是否显示更多
        findModel, // 内部查询结构
        arrQuickFind, // 快捷查询
        formControl // 获取表单的dom
      }
    }
  })
</script>

<style>

</style>
